<template>
  <view style="padding-bottom:50px;">
    商品详情页==={{goods_id}}
    <swiper circular indicator-dots autoplay :interval="1000" :duration="500">
      <swiper-item @click="imageBtn(item.pics_big_url)" v-for="(item,index)  in  goodsInfo.pics" :key="index">
        <image :src="item.pics_mid_url"></image>
      </swiper-item>
    </swiper>

    <view v-if="goodsInfo.goods_price" class="" style="padding:10px">
      ￥ {{goodsInfo.goods_price}}
    </view>

    <view style="display:flex;align-items: center;padding:10px;">
      <uni-list-item class="left" :title="goodsInfo.goods_name"></uni-list-item>
      <view class="chat-custom-right">
        <uni-icons type="star-filled" color="#999" size="18"></uni-icons>
        <text class="chat-custom-text">收藏</text>
        <!-- 需要使用 uni-icons 请自行引入 -->

      </view>
    </view>
    <view style="font-size: 12px;padding:10px;color:#666;" class="">
      快递：免运费
    </view>

    <view class="" v-html="goodsInfo.goods_introduce">
      <!-- {{goodsInfo.goods_introduce}} -->
    </view>
    ==={{total}}

    <uni-goods-nav style="position: fixed;bottom:0;left:0;z-index:99;width:100%" :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick" @buttonClick="buttonClick" />
  </view>
</template>
<script>
 
  import {mapMutations,mapGetters} from 'vuex'
  export default {
     computed:{
       ...mapGetters("cart",['total'])
     },
    data() {
      return {
        goods_id: '',
        goodsInfo: {},

        options: [{
          icon: 'shop',
          text: '店铺',
          infoBackgroundColor: '#007aff',
          infoColor: "red"
        }, {
          icon: 'cart',
          text: '购物车',
          info: 0
        }],
        buttonGroup: [{
            text: '加入购物车',
            backgroundColor: '#ff0000',
            color: '#fff'
          },
          {
            text: '立即购买',
            backgroundColor: '#ffa200',
            color: '#fff'
          }
        ]
      };
    },
    watch:{
      total(newVal){
        console.log(newVal,888)
         this.options[1].info=newVal
      }
    },
    
    onShow() {
      this.options[1].info=this.total
    },

    onLoad(option) {
      
      
     // this.setTabBarBarage()
      //console.log(option.goods_id, 8888)
      this.goods_id = option.goods_id
      this.getGoodsDetail()
    },
    methods: {
      
      ...mapMutations("cart",['addCart']),
      async getGoodsDetail() {
        const res = await uni.$http.get('/api/public/v1/goods/detail?goods_id=' + this.goods_id)
        console.log(res, 99888)
        this.goodsInfo = res.data.message
      },

      onClick(e) {
        console.log(e,9988)
       if(e.content.text=='购物车'){
         
         uni.switchTab({
           url:'../../pages/cart/cart'
         })
       }
       
       
       
       
      },
      buttonClick(e) {
        console.log(e,8877)
        if(e.content.text=='加入购物车'){
          // 将商品天啊及到仓库中  准备数据是一个对象
          var  goods={
            goods_id: this.goodsInfo.goods_id,
            goods_name:this.goodsInfo.goods_name,
            goods_price:this.goodsInfo.goods_price,
            goods_number:1,
            goods_small_logo:this.goodsInfo.goods_small_logo,
            goods_state:true
          }
          //  将商品添加到仓库中  触发store中的添加商品函数
          this.addCart(goods)
          
        }
      },
      
      //  图片预览
      imageBtn(current){
        // var arr=this.goodsInfo.pics.map(item=>item.pics_big_url)
        // console.log(arr,7777)
        wx.previewImage({
          current: current, // 当前显示图片的http链接
          urls: this.goodsInfo.pics.map(item=>item.pics_big_url) // 需要预览的图片http链接列表
        })
      }
    }
  }
</script>

<style lang="scss">
  .left {
    flex: 10;

    .uni-list-item__container {
      padding: 0;
    }
  }

  .chat-custom-right {
    flex: 1;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
  }

  .chat-custom-text {
    font-size: 12px;
    color: #999;
  }
  

</style>
